<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.corp_name" placeholder="负责人查询" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:reason="scope">
        <div class="text-truncate" :title="scope.row.confuse_des">{{ scope.row.confuse_des }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="数字档案卡" name="first">
          <credit-file :query-id="queryId" :viewMode="true"></credit-file>
        </el-tab-pane>
        <el-tab-pane label="政府推荐函" v-if="+relatedData.submit_type === 1">
          <recommend-file :related-data="relatedData" :viewMode="true"></recommend-file>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <reject-view :visible.sync="rejectVisible" :reject-data="rejectData"></reject-view>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { enumGuatype, enumProjectNode } from '@/credit/plugins/enumTown'
import { mapGetters } from 'vuex'
import { MANAGE_JOBS } from '@/credit/plugins/constant'
import AttachView from '@/credit/components/AttachView'
import CreditFile from '@/credit/components/creditFile/CreditCard'
import RecommendFile from '@/credit/views/city/program/RecommendFile'
import RejectView from '@/credit/views/city/program/RejectView'
export default {
  components: {
    SelectAddress,
    AttachView,
    CreditFile,
    RecommendFile,
    RejectView,
  },
  props: {},
  data() {
    return {
      order: {
        confuse_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'gua_type.in': '1,2,4',
        'confuse_status.eq': '3',
      },
      queryId: '',
      rejectVisible: false,
      rejectData: {},
      reportVisible: false,
      relatedData: {},
      activeName: 'first',
      tableName: 'customer_related',
      totalCount: 0,
      loading: false,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        {
          attrs: { label: '业务类型', prop: 'gua_type', align: 'center' },
          process: v => enumGuatype[v] || '-',
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '拒绝机构', prop: 'confuse_person', align: 'center' } },
        {
          attrs: { label: '拒绝时间', prop: 'confuse_time', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy.MM.dd'),
        },
        {
          attrs: { label: '拒绝环节', prop: 'confuse_node', align: 'center' },
          process: v => enumProjectNode[v] || '-',
        },
        { attrs: { label: '拒绝理由', prop: 'confuse_des', align: 'center' }, slot: 'reason' },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            { content: '拒绝详情', icon: 'fa fa-file-o', event: this.handleReject },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['org', 'userId', 'job', 'user']),
    clientId() {
      return this.org.clientId
    },
    isUserTown() {
      return +this.user.orgRegionLever === 3
    },
    isManager() {
      return MANAGE_JOBS.includes(this.job)
    },
  },
  watch: {},
  mounted() {},
  created() {
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.params.index = index
      if (!this.isManager) {
        this.params['orWhere.pre_approval_person.eq'] = this.userId
        this.params['orWhere.res_a.eq'] = this.userId
        this.params['orWhere.res_b.eq'] = this.userId
      } else {
        if (this.isUserTown) {
          this.params['service_id.eq'] = this.clientId
        } else {
          this.params['orWhere.service_id.eq'] = this.clientId
          this.params['orWhere.recommend_service.eq'] = this.clientId
        }
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          this.tableData = (res && res.data && res.data.data) || []
          this.totalCount = (res && res.data && res.data.totalCount) || 0
        })
        .catch(() => {
          this.$message.error('请求项目库失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView(row) {
      this.activeName = 'first'
      this.queryId = row.customer_related_id
      this.reportVisible = true
      this.relatedData = row
    },
    handleReject(row) {
      this.rejectVisible = true
      this.rejectData = row
    },
  },
}
</script>
<style lang="scss" scoped></style>
